<template>
    <div class="paper-list">
        <search :searchKey.sync="searchKey" 
                enterButton="搜索论文"
                placeholder="输入你感兴趣的论文名或关键字"
                @search="search"/>
        <div class="conference-container">
            <div class="title">
                <Icon type="md-apps" size="32" color="#999"></Icon>
                <h3 style="margin-left:10px;font-size:17px">期刊论文</h3>
            </div>
            <Divider style="margin-top:15px;width:200px !important;background-color:#ccc" />

            <!-- 骨架屏 -->
            <el-skeleton animated :style="!loading&&'padding-top:0'" class="journal-content" :loading="loading">
                <template slot="template">
                <div class="journal-list"  v-for="(item,index) in 3" :key="index">
                    <el-skeleton-item variant="image" style="width: 110px; height: 165px;" />
                    <div class="journal-info">
                        <el-skeleton-item variant="text" style="margin-left: 16px;width:100px"  />
                        <el-skeleton-item variant="text" style="margin-left: 16px;" />
                        <el-skeleton-item variant="text" style="margin-left: 16px;" />
                        <el-skeleton-item variant="text" style="margin-left: 16px;" />
                    </div>
                </div>
                </template>
            </el-skeleton>
            <!-- 骨架屏 -->

            <div class="journal-content" v-if="!loading">
                <div class="journal-list" @click="toSubPaper('CSSCI期刊')">
                    <div><img src="../assets/j1.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />CSSCI期刊</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{cssciCount}}篇</div>
                        <div>中国电化教育、电化教育研究、教育研究、现代教育技术、中国远程教育、开放教育研究期刊论文（2011-2020年）</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('NSC教育类论文')">
                    <div><img src="../assets/j2.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />NSC教育类论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{nscCount}}篇</div>
                        <div>Nature\Science\Cell三大期刊教育类论文（2010-2020年）</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('SSCI期刊论文')">
                    <div><img src="../assets/j3.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />SSCI期刊论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{sciCount}}篇</div>
                        <div>Web Of Science核心数据库前26个SSCI期刊论文（2007-2020年）</div>
                    </div>
                </div>
            </div>
            <div class="title">
                <Icon type="md-apps" size="32" color="#999"></Icon>
                <h3 style="margin-left:10px;font-size:17px">专题论文</h3>
            </div>
            <Divider style="margin-top:15px;width:200px !important;background-color:#ccc" />

            <!-- 骨架屏 -->
            <el-skeleton animated :style="!loading&&'padding-top:0'" class="journal-content" :loading="loading">
                <template slot="template">
                <div class="journal-list"  v-for="(item,index) in 6" :key="index">
                    <el-skeleton-item variant="image" style="width: 110px; height: 165px;" />
                    <div class="journal-info">
                        <el-skeleton-item variant="text" style="margin-left: 16px;width:200px"  />
                        <el-skeleton-item variant="text" style="margin-left: 16px;" />
                        <el-skeleton-item variant="text" style="margin-left: 16px;" />
                        <el-skeleton-item variant="text" style="margin-left: 16px;" />
                    </div>
                </div>
                </template>
            </el-skeleton>
            <!-- 骨架屏 -->

            <div class="journal-content" v-if="!loading">
                <div class="journal-list" @click="toSubPaper('信息科学与教育交叉研究论文')">
                    <div><img src="../assets/j4.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />信息科学与教育交叉研究论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{itEduCount}}篇</div>
                        <div>2015-2019年在学习成效预测、学习行为分析、教学过程评价、情感计算、自适应学习反馈与干预等方面的国外论文</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('社会学与教育交叉研究论文')">
                    <div><img src="../assets/j5.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />社会学与教育交叉研究论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{eduSocCount}}篇</div>
                        <div>2009-2019年教育社会学、群体学习、学习者交互网络、图学习等方面的论文</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('心理学与教育交叉研究论文')">
                    <div><img src="../assets/j6.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />心理学与教育交叉研究论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{psyEduCount}}篇</div>
                        <div>2011-2020年心理学在教育中的应用研究论文，涵盖学习者认知、高阶思维、学习行为、教学干预等方面</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('脑科学与教育交叉论文')">
                    <div><img src="../assets/j7.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />脑科学与教育交叉论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{brainEduCount}}篇</div>
                        <div>2003年-2020年在教育神经科学、认知神经机制、创造性思维、个体差异等方面的论文</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('EDM会议论文')">
                    <div><img src="../assets/j8.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />EDM会议论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{confEdmCount}}篇</div>
                        <div>2016年-2020年EDM会议论文</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('LAK会议论文')">
                    <div><img src="../assets/j9.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />LAK会议论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{confLakCount}}篇</div>
                        <div>2016年-2020年LAK会议论文</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('ITS会议论文')">
                    <div><img src="../assets/j10.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />ITS会议论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{confItsCount}}篇</div>
                        <div>2012年-2020年ITS会议论文</div>
                    </div>
                </div>
                <div class="journal-list" @click="toSubPaper('AIED会议论文')">
                    <div><img src="../assets/j11.png" alt=""></div>
                    <div class="journal-info">
                        <div>
                            <Icon type="md-list-box" size="22" />AIED会议论文</div>
                        <div>
                            <Icon type="md-time" size="16" />更新时间：2021-07-30</div>
                        <div>
                            <Icon type="ios-keypad" size="16" />文章数量：{{confAiedCount}}篇</div>
                        <div>2011年-2021年AIED会议论文</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import search from '../components/topSearch.vue';
import service from '@/service/papers'
export default {
    components:{search},
    data(){
        return{
            searchKey:'',
            brainEduCount:58,
            confAiedCount:1030,
            confEdmCount:622,
            confItsCount:388,
            confLakCount:477,
            cssciCount:12064,
            eduSocCount:425,
            itEduCount:200,
            nscCount:106,
            psyEduCount:391,
            sciCount:14050,
            loading:true,
        }
    },
    created(){
        //向后端请求数据
        service.getStatData().then(res => {
        if (!res.data) return
        const counts = ['cssci', 'sci', 'nsc' , 'eduSoc', 'psyEdu', 'itEdu', 'brainEdu', 'confEdm', 'confLak', 'confIts', 'confAied']
            //迭代赋值
            counts.map(i=>{
                this[`${i}Count`] = res.data[`${i}Count`]
            });
            setTimeout(() => {
                this.loading = false;
            }, 500);
        });
    },
    mounted(){
        this.$Loading.finish();
    },
    methods:{
        toSubPaper(data){
            this.$router.push({
                path:'/paper/' + data
            });
        },
        search(){
            this.$router.push({
                name:'PaperSearch',
                params:{
                    searchKey:this.searchKey
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
    /deep/ .ivu-divider-horizontal{
        margin-bottom: 10px !important;
    }
    .search-div{
        padding-bottom: 100px;
    }
    .paper-list {
        background: white;
        .conference-container {
            padding: 30px 50px;
            text-align: left;
            width: 96%;
            margin-left: 2%;
            .title {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .journal-content {
                overflow: hidden;
                padding-top: 20px;
                .journal-list {
                    position: relative;
                    overflow: hidden;
                    display: flex;
                    flex-direction: row;
                    float: left;
                    flex-shrink: 0;
                    height: 200px;
                    padding: 15px 15px;
                    margin-left: 20px;
                    width: 31%;
                    background: white;
                    transition: all 0.4s ease;
                    cursor: pointer;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
                    margin-bottom: 30px;
                    border-radius: 10px;
                    img {
                        margin-right: 15px;
                        width: 110px;
                        height: 165px;
                        object-fit: cover;
                    }
                    >div:nth-of-type(2) {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                    }
                    .journal-info {
                        >div {
                            font-size: 13px;
                            color: #888;
                        }
                        >div:nth-of-type(1) {
                            font-size: 18px;
                            font-weight: bold;
                            color: #333;
                        }
                    }
                }
                .journal-list:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 0 14px rgba(0, 0, 0, 0.301);
                }
            }
        }
    }

    @media (max-width:1060px) {
        .paper-list {
            .conference-container {
                padding: 15px 15px;
                .title{
                    margin-top: 10px;
                }
                .journal-content {
                    display: flex;
                    flex-direction: column;

                    .journal-list {
                        width: 100%;
                        margin-left: 0%;
                        margin-bottom: 15px;
                    }
                }
            }
        }
    }
</style>